package com.midele.goodstuff.ui.main.screen

import android.content.Intent
import androidx.activity.compose.LocalActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.midele.goodstuff.R
import com.midele.goodstuff.data.model.TagTypeEntity
import com.midele.goodstuff.navigation.searchRoute
import com.midele.goodstuff.ui.main.goodtags.StoryList
import com.midele.goodstuff.ui.search.SearchActivity
import com.midele.goodstuff.viewmodel.ExploreViewModel

@Composable
internal fun ExploreRoute(
    modifier: Modifier = Modifier,
    viewModel: ExploreViewModel = hiltViewModel(),
    navController: NavHostController,
) {

    ExploreScreen(modifier,navController)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ExploreScreen(modifier: Modifier = Modifier,navController: NavHostController) {
    val activity = LocalActivity.current ?: return // 确保有当前的Activity实例
    ConstraintLayout(modifier = modifier.fillMaxSize()) {
        val (miLogo, searchLayout, tagTypeLayout, bannerAdLayout, hotRecommendTileLayout, dataListLayout) = createRefs()

        val tagTypeList = listOf(
            TagTypeEntity(
                id = 1,
                name = "推荐",
                selIcon = R.mipmap.ic_tag_recomand_sel,
                unSelIcon = R.mipmap.ic_tag_recomand_unsel,
                isChecked = true
            ),
            TagTypeEntity(
                id = 2,
                name = "古珠",
                selIcon = R.mipmap.ic_tag_ancientbeads_sel,
                unSelIcon = R.mipmap.ic_tag_ancientbeads_unsel,
                isChecked = false
            ),
            TagTypeEntity(
                id = 3,
                name = "藏传",
                selIcon = R.mipmap.ic_tag_tibetanbuddhism_sel,
                unSelIcon = R.mipmap.ic_tag_tibetanbuddhism_unsel,
                isChecked = false
            ),
            TagTypeEntity(
                id = 4,
                name = "文玩",
                selIcon = R.mipmap.ic_tag_antiquecurios_sel,
                unSelIcon = R.mipmap.ic_tag_antiquecurios_unsel,
                isChecked = false
            ),
            TagTypeEntity(
                id = 5,
                name = "珠宝",
                selIcon = R.mipmap.ic_tag_tibetanbuddhism_sel,
                unSelIcon = R.mipmap.ic_tag_tibetanbuddhism_unsel,
                isChecked = false
            ),
        )

        Image(
            painter = painterResource(id = R.drawable.ic_main_bg), // 替换为你的图片资源ID
            contentDescription = "Background Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Crop, // 图片填充模式，根据你的需求选择合适的模式
            modifier = Modifier
                .fillMaxSize() // 使图片填充整个Box大小
        )
        Image(
            painter = painterResource(id = R.mipmap.ic_mi_main_logo), // 替换为你的图片资源ID
            contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
            modifier = Modifier.constrainAs(miLogo) {
                top.linkTo(parent.top, margin = 44.dp)
                start.linkTo(parent.start, margin = 18.dp)
            }
        )

        Row(
            modifier = Modifier
                .height(40.dp)
                .constrainAs(searchLayout) {
                    top.linkTo(parent.top, margin = 44.dp)
                    start.linkTo(miLogo.end, margin = 6.dp)
                    end.linkTo(parent.end, margin = 16.dp)
                    width = Dimension.fillToConstraints
                }
                .background(color = Color(0xFF211C18), shape = RoundedCornerShape(100.dp))
                .clickable{
                   /* val intent = Intent(activity, SearchActivity::class.java)
                    activity.startActivity(intent)*/
                    navController.navigate(searchRoute)
                },
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Spacer(modifier = Modifier.width(12.dp))
            Image(
                painter = painterResource(id = R.mipmap.ic_white_search), // 替换为你的图片资源ID
                contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
                contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = "请输入你想要的物品", color = Color(0xFF646566), fontSize = 14.sp)
        }

        StoryList(
            profiles = tagTypeList,
            onProfileClicked = {
                // showStory.value = true
                //onProfileClicked.invoke()
            },
            modifier = Modifier.constrainAs(tagTypeLayout) {
                top.linkTo(searchLayout.bottom, margin = 12.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
        )

        Image(
            painter = painterResource(id = R.drawable.ic_main_banner_ad), // 替换为你的图片资源ID
            contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .height(140.dp)
                .constrainAs(bannerAdLayout) {
                    top.linkTo(tagTypeLayout.bottom, margin = 18.dp)
                    start.linkTo(parent.start, margin = 16.dp)
                    end.linkTo(parent.end, margin = 16.dp)
                }
        )

        Row(
            modifier = Modifier
                .height(28.dp)
                .fillMaxWidth()
                .constrainAs(hotRecommendTileLayout) {
                    top.linkTo(bannerAdLayout.bottom, margin = 16.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Start,
        ) {
            Spacer(modifier = Modifier.width(16.dp))
            Image(
                painter = painterResource(id = R.mipmap.ic_small_recomand), // 替换为你的图片资源ID
                contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
                contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
                modifier = Modifier.size(28.dp)
            )
            Spacer(modifier = Modifier.width(2.dp))
            Text(text = "热门推荐", color = Color(0xFFFCE9C1), fontSize = 20.sp)
        }

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            contentPadding = PaddingValues(horizontal = 16.dp),
            verticalArrangement = Arrangement.spacedBy(9.dp),
            horizontalArrangement = Arrangement.spacedBy(9.dp),
            modifier = Modifier
                .padding(bottom = 20.dp)
                .constrainAs(dataListLayout) {
                    top.linkTo(hotRecommendTileLayout.bottom, margin = 16.dp)
                    start.linkTo(parent.start, margin = 16.dp)
                    end.linkTo(parent.end, margin = 16.dp)
                    bottom.linkTo(parent.bottom, margin = 40.dp)
                    height = Dimension.fillToConstraints
                }
        ) {
            items(6) {
                ConstraintLayout(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(228.dp)
                        .background(color = Color(0xFF211C18), shape = RoundedCornerShape(16.dp))
                ) {

                    val (imgLogoLayout, itemTagLayout, itemNameLayout, itemHeaderLogoLayout,itemUserNameLayout, itemLikeLayout, itemLikeAccountLayout) = createRefs()

                    Image(
                        painter = painterResource(id = R.drawable.ic_good_demo), // 替换为你的图片资源ID
                        contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
                        contentScale = ContentScale.Crop, // 图片填充模式，根据你的需求选择合适的模式
                        modifier = Modifier
                            .clip(RoundedCornerShape(10.dp))
                            .height(160.dp)
                            .constrainAs(imgLogoLayout) {
                                top.linkTo(parent.top, margin = 8.dp)
                                start.linkTo(parent.start, margin = 8.dp)
                                end.linkTo(parent.end, margin = 8.dp)
                                width = Dimension.fillToConstraints
                            }

                    )

                    Text(
                        text = "至纯天珠",
                        color = Color.White,
                        fontSize = 12.sp,
                        modifier = Modifier
                            .background(color = Color(0xB3000000), shape = RoundedCornerShape(100.dp))
                            .constrainAs(itemTagLayout) {
                                top.linkTo(parent.top, margin = 10.dp)
                                start.linkTo(parent.start, margin = 14.dp)
                            }
                    )
                    Text(
                        text = "货真价实 极品天珠",
                        color = Color.White,
                        fontSize = 14.sp,
                        modifier = Modifier
                            .constrainAs(itemNameLayout) {
                                start.linkTo(parent.start, margin = 12.dp)
                                bottom.linkTo(parent.bottom, margin = 32.dp)
                            }
                    )
                    Image(
                        painter = painterResource(id = R.mipmap.ic_tag_jewelry_sel), // 替换为你的图片资源ID
                        contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
                        contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
                        modifier = Modifier
                            .size(12.dp)
                            .clip(CircleShape)
                            .constrainAs(itemHeaderLogoLayout) {
                                start.linkTo(parent.start, margin = 12.dp)
                                bottom.linkTo(parent.bottom, margin = 11.dp)
                            }
                    )
                    Text(
                        text = "用户名称",
                        color = Color(0xFF969799),
                        fontSize = 10.sp,
                        modifier = Modifier
                            .constrainAs(itemUserNameLayout) {
                                start.linkTo(itemHeaderLogoLayout.end, margin = 4.dp)
                                bottom.linkTo(parent.bottom, margin = 9.dp)
                            }
                    )

                    Image(
                        painter = painterResource(id = R.mipmap.ic_unlike_good), // 替换为你的图片资源ID
                        contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
                        contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
                        modifier = Modifier
                            .size(18.dp)
                            .constrainAs(itemLikeLayout) {
                                end.linkTo(itemLikeAccountLayout.start, margin = 2.dp)
                                bottom.linkTo(parent.bottom, margin = 11.dp)
                            }
                    )
                    Text(
                        text = "999",
                        color = Color(0xFF969799),
                        fontSize = 12.sp,
                        modifier = Modifier
                            .constrainAs(itemLikeAccountLayout) {
                                end.linkTo(parent.end, margin = 12.dp)
                                bottom.linkTo(parent.bottom, margin = 9.dp)
                            }
                    )


                }
            }
        }

    }
}